﻿<!DOCTYPE html>
<!--隐患排查内容管理编辑-->
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/static/js/common.js"></script>

    <link href="../static/js/vue-treeselect/vue-treeselect.css" rel="stylesheet" />
    <script src="../static/js/vue-treeselect/vue-treeselect.js"></script>
    <style>
        body {
            padding-bottom: 10px;
        }

        .vue-treeselect_style .vue-treeselect__control {
            height: 100%;
            border: none;
            background: none;
        }

        .vue-treeselect__placeholder {
            top: -3px;
        }

        .vue-treeselect__single-value {
            top: -3px;
        }
    </style>
</head>

<body>
    <el-col id="app" v-cloak class="popupW100">
        <el-button type="primary" @click="AddContent" v-if="BtnVisible">选择排查内容</el-button>
        <br>
        <br>
        <el-form :model="Form" status-icon :rules="rules" ref="ruleForm" size="mini" label-position="right">


            <el-row>
                <el-col :span="24">
                    <el-form-item :label="RisksManagement.RiskContent.Unit+mark.m" class="inputTextarea">
                        {{Form.unitName}}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item :label="RisksManagement.RiskContent.Objective+mark.m" class="inputTextarea">
                        {{Form.objective}}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item :label="RisksManagement.RiskContent.PersonInCharge+mark.m" class="inputTextarea">
                        {{Form.personInChargeText}}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item :label="RisksManagement.RiskContent.Participant+mark.m" class="inputTextarea">
                        {{Form.participant}}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item :label="RisksManagement.RiskContent.Requirements+mark.m" class="inputTextarea">
                        {{Form.requirements}}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item :label="RisksManagement.RiskContent.Content+mark.m" class="inputTextarea">
                        {{Form.content}}
                    </el-form-item>
                </el-col>
            </el-row>


            <el-form :inline="true">
                <br>
                <el-row type="flex" justify="begin">


                    <el-form-item>
                        <el-button type="primary" @click="add" v-if="BtnVisible">手工添加标准</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
            <!--ListItem.tableHeight   :row-key="getRowKeys"-->
            <el-table ref="table" class="tb-edit" :data="Form.yH_ProjectAndDetail"
                      :height="400" border row-style="height:10px" style="width: 100%;margin:0 auto;margin-bottom:20px;">
                <el-table-column prop="Project" :label="RisksManagement.RiskContent.id" width="50">
                    <template slot-scope="props">
                        {{props.$index + 1}}
                    </template>
                </el-table-column>
                <!--添加类别-->
                <el-table-column prop="type" :label="RisksManagement.RiskContent.AddClass" min-width="80" show-overflow-tooltip="true">
                </el-table-column>
                <!--排查项目-->
                <el-table-column prop="project" :label="RisksManagement.RiskContent.Project" show-overflow-tooltip="true" min-width="80">
                    <template scope="scope">
                        <el-input size="mini" v-model="scope.row.project" placeholder="请输入内容">
                        </el-input>
                        <span>{{scope.row.project}}</span>
                        <span class="lineMust" v-if="!scope.row.project">
                            <img src="/static/images/exclamation.png" alt="">
                        </span>
                    </template>
                </el-table-column>
                <!--区域-->
                <el-table-column prop="region" :label="'区域'" align="center" min-width="80"
                                 show-overflow-tooltip="true">
                    <template scope="scope">
                        <el-input size="mini">
                            <treeselect v-model="scope.row.region" :options="AreaList"
                                        slot="suffix"
                                        flat="true"
                                        show-count="true"
                                        style="line-height: 14px;"
                                        placeholder="请选择" />
                        </el-input>
                        <span>{{scope.row.areaName}}</span>
                        <span class="lineMust" v-if="!scope.row.region">
                            <img src="/static/images/exclamation.png" alt="">
                        </span>
                    </template>
                </el-table-column>
                <!--备注-->
                <el-table-column prop="remark" :label="RisksManagement.RiskContent.Remark" show-overflow-tooltip="true" align="center" min-width="80">
                    <template scope="scope">
                        <el-input size="mini" v-model="scope.row.remark" placeholder="请输入内容"> </el-input>
                        <span>{{scope.row.remark}}</span>
                    </template>
                </el-table-column>
                <!--排查标准-->
                <el-table-column prop="standardContent" :label="RisksManagement.RiskContent.Standard" show-overflow-tooltip="true" align="center" min-width="80">
                    <template scope="scope">
                        <el-input size="mini" v-model="scope.row.standardContent" placeholder="请输入内容"> </el-input>
                        <span>{{scope.row.standardContent}}</span>
                        <span class="lineMust" v-if="!scope.row.standardContent">
                            <img src="/static/images/exclamation.png" alt="">
                        </span>
                    </template>
                </el-table-column>
                <!--隐患级别-->
                <el-table-column prop="riskLevel" :label="RisksManagement.RiskContent.RiskLevel" show-overflow-tooltip="true" align="center" min-width="80">
                    <template scope="scope">
                        <el-select @visible-change="visibleChange" v-model="scope.row.riskLevel" slot="suffix" size="mini"
                                   :placeholder="RisksManagement.ProcessMedium.RiskLevel">
                            <el-option label="请选择" value=""></el-option>
                            <el-option v-for="item in RiskLevel" :label="item.value" :value="item.key">
                            </el-option>
                        </el-select>
                        <span>{{scope.row.riskLevelText}}</span>
                        <span class="lineMust" v-if="!scope.row.riskLevel">
                            <img src="/static/images/exclamation.png" alt="">
                        </span>
                    </template>
                </el-table-column>
                <!--结果-->
                <el-table-column prop="result" :label="'排查'+RisksManagement.RiskContent.Result" min-width="70" align="center">
                    <template scope="scope">
                        <span v-if="scope.row.result!='未排查'">{{scope.row.result}}</span>
                        <div v-if="scope.row.result=='未排查'">
                            <el-button @click="Report(scope.row,'异常')" type="text" size="small">
                                {{'异常'}}
                            </el-button><br />
                            <el-button @click="Report(scope.row,'正常')" type="text" size="small">
                                {{'正常'}}
                            </el-button><br />
                            <el-button @click="Report(scope.row,'不涉及')" type="text" size="small">
                                {{'不涉及'}}
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
                <!--台账编号-->
                <el-table-column prop="result" :label="'台账编号'" width="150" align="center">
                    <template scope="scope">
                        <span v-if="scope.row.bookCode!='无'">
                            <el-button @click="showDetail(scope.row.bookCode)" type="text">
                                {{scope.row.bookCode}}
                            </el-button>
                            <br />{{scope.row.standingBookStateText}}
                        </span>
                        <span v-if="scope.row.bookCode=='无'">
                            {{scope.row.bookCode}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column width="90" prop="update" :label="'操作'">
                    <template slot-scope="scope">
                        <div v-if="!scope.row.isNotPlan">
                            <span class="start xian">
                                <button type="button" class="elst-bt-xg" @click=Edit(scope.row,scope.$index) v-if="scope.row.result=='未排查'">
                                    <i class="el-icon-edit"></i>
                                </button>
                                <button type="button" class="elst-bt-xg" @click="deleteRow(scope.row.screeningDetailId)" v-if="scope.row.result=='未排查'">
                                    <i class="el-icon-delete"></i>
                                </button>
                            </span>
                            <span class="end yin">
                                <button type="button" class="elst-bt-xg " @click="Save( scope.row)">
                                    <i class="el-icon-circle-check-outline"></i>
                                </button>
                                <button type="button" class="elst-bt-xg " @click="Back( scope.row)">
                                    <i class="el-icon-circle-close-outline"></i>
                                </button>
                            </span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!--<el-row>
                <el-col :span="24">
                    <el-form-item :label="RisksManagement.RiskContent.Remark+mark.m" prop="Remark" class="inputTextarea">
                        <el-input type="textarea" v-model="Form.remark" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex" justify="end">
                <el-form-item>
                    <el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnSave}}</el-button>
                    <el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnSubmit}}</el-button>
                    <el-button type="primary" @click="parent.ListItem.dialogVisible=false">{{col.btnBack}}</el-button>
                </el-form-item>
            </el-row>-->
        </el-form>
        <el-dialog :title="dialogTilte" fullscreen="true" :visible.sync="ListItem.dialogVisible" @close='closeDialog'
                   width="80%" height="80%" top="10vh">
            <iframe ref="iframe" :src="ListItem.InputUrl" style="height:95%;width:100%" frameborder="0"></iframe>
        </el-dialog>


        <script type="text/javascript">
            Vue.component('treeselect', VueTreeselect.Treeselect)
            app = new Vue({
                el: '#app',
                data: {
                    //父业传参
                    id: '',
                    dialogTilte: '',
                    //业务表单内容
                    //设置频次dialog是否展示
                    //SetFrequencydialogVisible: false,
                    //SetFrequencyInputUrl: '',
                    ListItem: ListItem,
                    BtnVisible: true,
                    RiskLevel: [],
                    AreaList: [],
                    AllAreaList: [],
                    Unit: '',
                    newObj: {},
                    Form: {
                        sysDepartment: { name: '' },
                        id: guidEmpty,
                        unit: '',
                        unitName: '',
                        objective: '',
                        personInCharge: null,
                        personInChargeText: '',
                        participant: null,
                        requirements: '',
                        content: '',

                        //yH_ScreeningProject: [],
                        yH_ProjectAndDetail: [],
                    },
                    spanArr: [],
                    //表单验证
                    rules: {
                        //RiskLevel: [
                        //    verification.NotNull
                        //],
                        //CheckStandard: [
                        //    verification.NotNull,
                        //    { pattern: verification.StringLengthAtoB.t.format(5, 50), message: verification.StringLengthAtoB.m.format(5, 200), trigger: 'blur' }
                        //],

                    }
                },
                methods: {
                    //解決edge下select bug
                    visibleChange: function (isVisible) {
                        visibleChange(isVisible)
                    },
                    showDetail: function (bookNo) {
                        alert("台账编号：" + bookNo + "的详细页面")
                    },
                    Report: function (data, result) {
                        var mythis = this;
                        this.$confirm('此操作将提交排查结果为:"' + result + '", 是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            if (result == '异常') {
                                //mythis.ChangeResult(data.id, result);
                                this.dialogTilte = '提交排查结果'
                                DialogShow(this, 'xg', "RiskTaskInputReport.html", data.id);
                            }
                            else {
                                data.result = result;
                                myAjax("post", mythis, '/api/YH_Screening/Report', data, function (response) {
                                    showMessage(msg.OperatingOk, 'success');
                                    mythis.ChangeResult(data.id, result);
                                });
                            }
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消排查'
                            });
                        });
                    },
                    ChangeResult: function (id, result) {
                        var list = this.Form.yH_ProjectAndDetail;
                        for (var i = 0; i < list.length; i++) {
                            var v = list[i];
                            if (v.id == id) {
                                v.result = result;
                                break;
                            }
                        }

                    },
                    AddContent: function (val, id) { DialogShow(this, val, "RiskTaskInputAdd.html", id); },
                    // 行内编辑 js
                    add: function (formName) {
                        if ($('tbody tr').attr("class") == "el-table__row current-row") {
                            showMessage(msg.EditingNotCompleted, 'error');
                        } else {
                            $('.el-table__row').removeClass('current-row');
                            $('.el-table__row span.end').removeClass('xian');
                            $('.el-table__row span.end').addClass('yin');
                            $('.el-table__row span.start').removeClass('yin');
                            $('.el-table__row span.start').addClass('xian');
                            this.ListItem.type = 'tj';
                            var screeningDetailId = newGuid()
                            //显示用
                            this.newObj = {
                                screeningDetailId: screeningDetailId,
                                type: "手工",
                                region: null,
                                areaName: '',
                                standardContent: '',
                                riskLevel: '',
                                riskLevelText: '',
                                searchMajorCode: 'YH_Custom',
                                searchMajorCodeName: '手工添加类',
                                result: '',
                                project: '',
                                remark: '',
                                bookCode: '无',
                                screeningId: this.id
                            }
                            if (!this.Form.yH_ProjectAndDetail) this.Form.yH_ProjectAndDetail = [];
                            this.Form.yH_ProjectAndDetail.unshift(this.newObj);
                            setTimeout(function () {
                                $('.el-table__row:eq(0)').addClass('current-row');
                                $('.el-table__row:eq(0) span.end').removeClass('yin');
                                $('.el-table__row:eq(0) span.end').addClass('xian');
                                $('.el-table__row:eq(0) span.start').removeClass('xian');
                                $('.el-table__row:eq(0) span.start').addClass('yin');
                            }, 100);
                        }
                    },
                    //修改
                    Edit: function (row, index) {
                        $('.el-table__row').removeClass('current-row');
                        $('.el-table__row:eq(' + index + ')').addClass('current-row');
                        $('.el-table__row span.end').removeClass('xian');
                        $('.el-table__row span.end').addClass('yin');
                        $('.el-table__row span.start').removeClass('yin');
                        $('.el-table__row span.start').addClass('xian');
                        $('.el-table__row:eq(' + index + ') span.end').removeClass('yin');
                        $('.el-table__row:eq(' + index + ') span.end').addClass('xian');
                        $('.el-table__row:eq(' + index + ') span.start').removeClass('xian');
                        $('.el-table__row:eq(' + index + ') span.start').addClass('yin');
                        this.ListItem.type = 'xg';
                        this.ListItem.modityShowRow = $.extend({}, row);
                    },
                    // 保存
                    Save: function (row) {
                        //if (!b.Region || !b.Remark || !b.Standard.data || !b.RiskLevel) {
                        //    showMessage(msg.NoMust, 'error');
                        //}
                        //else {
                        if (!row.result) row.result = '未排查';
                        row.riskLevelText = this.GetRiskLevelName(row.riskLevel);
                        row.areaName = this.GetAreaName(row.region);


                        //调用保存接口
                        //...
                        if (this.ListItem.type == 'xg') {
                            this.onSaveBtn('/api/YH_Screening/Update', row);
                        }
                        else if (this.ListItem.type == 'tj') {
                            this.onSaveBtn('/api/YH_Screening/Insert', this.newObj);
                        }





                        $('.el-table__row').removeClass('current-row');
                        $('.el-table__row span.end').removeClass('xian');
                        $('.el-table__row span.end').addClass('yin');
                        $('.el-table__row span.start').removeClass('yin');
                        $('.el-table__row span.start').addClass('xian');
                    },
                    Back: function (row) {
                        $('.el-table__row').removeClass('current-row');
                        $('.el-table__row span.end').removeClass('xian');
                        $('.el-table__row span.end').addClass('yin');
                        $('.el-table__row span.start').removeClass('yin');
                        $('.el-table__row span.start').addClass('xian');
                        dianX(row, this.Form.yH_ProjectAndDetail);
                    },
                    handblur: function () {
                        //this.$refs.table.setCurrentRow(999);
                        //console.log("c", 'c');
                    },
                    //删除列表行
                    deleteRow: function (id) {
                        var mythis = this;
                        //调用删除接口
                        myAjax("get", this, '/api/YH_Screening/Remove?id='+id, null, function (response) {
                        
                            showMessage(msg.OperatingOk, "success");
                            var temp = [];
                            var Standard = mythis.Form.yH_ProjectAndDetail;

                            //删除用于显示的数据集合
                            for (var i = 0; i < Standard.length; i++) {
                                temp.push(Standard[i]);
                            }
                            for (var i = temp.length - 1; i >= 0; i--) {
                                if (id == temp[i].screeningDetailId) {
                                    Standard.splice(i, 1);
                                }
                            }
                        });
                     
                    },
                    onSaveBtn: function (url, Form) {
                        var mythis = this;
                        var loadingObj;
                        if (mythis._isVue)
                            loadingObj = mythis.$loading(myloading);
                        else
                            loadingObj = mythis.app.$loading(myloading);
                        mythis.ListItem.loadingbut = true;

                        myAjax("post", mythis, url, Form, function (response) {
                            showMessage(msg.OperatingOk, 'success');
                            mythis.ListItem.loadingbut = false;
                            loadingObj.close();
                        }, false, function (response) {
                            showMessage(response.message, 'error')
                            loadingObj.close();
                        });
                    },
                    //排查部门input
                    input: function (value) {
                        this.Form.Unit = value;
                    },
                    //获取input数据
                    getData: function () {
                        getData(this, '/api/YH_Screening/get?id=' + this.id);
                        console.log('Form', this.Form)
                    },
                    handleSelectionChange: function (val) { handleSelectionChange(this, val); },
                    InputInputStand: function (val, id) {
                        this.dialogTilte = "排查项目说明";
                        //DialogShow(this, val, "RiskContentEditStandardType.html", id);
                        var url = "RiskContentEditStandardType.html";
                        if (val == 'tj') {
                            this.ListItem.InputUrl = url + "?pid=" + this.id + "&api=RiskContent&t=" + Date.parse(new Date());
                        } else {
                            this.ListItem.InputUrl = url + "?id=" + id + "&pid=" + this.id + "&api=RiskContent&t=" + Date.parse(new Date());
                        }
                        this.ListItem.dialogVisible = true;
                    },
                    InputInputManagement: function (val, id) {
                        this.dialogTilte = "排查项目说明";
                        //DialogShow(this, val, "RiskContentEditStandardType.html", id);
                        var url = "RiskContentEditStandardTypeManagement.html";
                        if (val == 'tj') {
                            this.ListItem.InputUrl = url + "?pid=" + this.id + "&api=RiskContent&t=" + Date.parse(new Date());
                        } else {
                            this.ListItem.InputUrl = url + "?id=" + id + "&pid=" + this.id + "&api=RiskContent&t=" + Date.parse(new Date());
                        }
                        this.ListItem.dialogVisible = true;
                    },
                    closeDialog: function () {
                        console.log('触发close')
                        console.log(this.id)
                        this.getData();
                        //console.log(this.Form)
                        //console.log(this.Form.InputTable)
                        //console.log(this.Form.Remark)
                        //console.log('this.Form.InputTable', this.Form.InputTable)
                        //this.ListItem.tableData = this.Form.InputTable;
                        //this.getSpanArr(this.ListItem.tableData);



                    },
                    GetAreaList: function (type) {
                        var mythis = this;
                        myAjax("post", this, '/api/SysArea/GetListSub', { model: { Name: '', Code: '', SubFactory: null }, offset: 0, limit: 999 }
                            , function (response) {
                                console.log('1', response.data.pageData);
                                mythis.AllAreaList = response.data.pageData;
                                mythis.AreaList = menuHelperX(response.data.pageData, guidEmpty);
                            },
                            false);
                    },
                    GetAreaName: function (id) {
                        var AllAreaList = this.AllAreaList;
                        for (var i = 0; i < AllAreaList.length; i++) {
                            if (AllAreaList[i].id == id) {
                                return AllAreaList[i].name;
                            }
                        }
                        return id;
                    },
                    GetRiskLevelName: function (id) {
                        var RiskLevel = this.RiskLevel;
                        for (var i = 0; i < RiskLevel.length; i++) {
                            if (RiskLevel[i].key == id) {
                                return RiskLevel[i].value;
                            }
                        }
                        return id;
                    }
                },
                mounted: function () {
                    this.GetAreaList();
                    this.RiskLevel = getDicData('03');
                    //绑定下拉和tree
                    //获取传值id
                    this.id = getUrlParam("id");

                    //读取数据
                    this.getData();
                    //读取数据到表格数据对象
                    //this.ListItem.tableData = [];
                    if (this.Form.status == "已完成") this.BtnVisible = false;

                }
            });
            //下拉树数据格式化
            function menuHelperX(list, pid) {
                var result = [];
                if (list.length <= 0)
                    return list;
                list.forEach(function (v, i) {
                    var temp = {};
                    for (var key in v) {
                        temp[key] = v[key];
                    }
                    temp.label = v.name;
                    temp.parentId = temp.parentId ? temp.parentId : guidEmpty;
                    var obj;
                    if (temp.parentId == pid) {
                        obj = temp;
                        var nextObj = menuHelperX(list, temp.id);
                        if (nextObj.length > 0) {
                            obj.children = nextObj;
                        }
                    }
                    if (obj)
                        result.push(obj)
                })
                return result;
            }
        </script>
</body>

</html>